<template>
  <div class="wik-document">
    <div class="wik-document-top">
      <span>共{{ tableData.length }}条记录</span>
      <span>
        <el-button v-if="BUTTONS['update']" type="text" :icon="Plus" color="#333" @click="addProjectAnnexFn">新增</el-button>
      </span>
    </div>
    <div class="wik-document-bottom">
      <Table
        :data="tableData"
        :columns="tableColumns"
        :options="{
          headerFixed: true
        }"
      >
        <template #typeId="{ scope }">
          {{ getDictItem("projectMember", scope.typeId) }}
        </template>
        <template #options="{ scope }">
          <el-button
            type="text"
            @click="deleteAccount(scope)"
            :disabled="!typeList.map((it: any) => it.id).includes(scope.typeId)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { addProjectUserList, getProjectUserList, deleteProjectUser } from "@/api/modules/project";
import { getListAllUser } from "@/api/modules/sys";
import Table from "@/components/Table/index.vue";
import { TableData, TableColumn } from "@/components/Table/interface";
import { dialogForm } from "@/utils/dialogForm";
import { useDict } from "@/hooks/useDict";
import { useHandleData } from "@/hooks/useHandleData";
const { BUTTONS } = useAuthButtons("projectMember");
const { getDictItem, promise, getDictId } = useDict(["projectMember"]);
const emits = defineEmits(["count"]);
const { projectId, orderId } = defineProps({
  orderDetail: {
    type: Object,
    default: () => {}
  },
  orderId: {
    type: String,
    default: ""
  },
  projectId: {
    type: String,
    default: ""
  }
});
const tableData = ref<TableData[]>([]);
const config = ref({});
const userList = ref<any>([]);
const typeList = ref([]);

const tableColumns = ref<TableColumn[]>([
  {
    type: "index",
    title: "编号",
    key: "serialNumber",
    width: 46
  },
  {
    title: "角色",
    key: "typeId",
    width: 320
  },
  {
    title: "责任人",
    key: "userName"
  }
]);
if (BUTTONS.value["update"]) {
  tableColumns.value.push({
    title: "操作",
    key: "options",
    width: 100
  });
}
const addProjectAnnexFn = () => {
  config.value = {
    title: "新增成员",
    width: 30,
    form: {
      formData: {
        projectId,
        orderProductId: orderId,
        typeId: "",
        member: []
      },
      rules: {
        typeId: [{ required: true, message: "请选择成员类型" }],
        member: [{ required: true, message: "请选择成员" }]
      }
    },
    api: addProjectUserList,
    column: [
      {
        type: "select",
        key: "typeId",
        formItemAttribute: {
          label: "成员角色"
        },
        attributes: {
          placeholder: "请选择",
          options: typeList,
          multiple: false,
          filterable: true,
          clearable: true
        }
      },
      {
        type: "select",
        key: "member",
        formItemAttribute: {
          label: "人员"
        },
        attributes: {
          placeholder: "请选择",
          options: userList,
          multiple: true,
          filterable: true,
          clearable: true
        }
      }
    ],
    transformData: (data: any) => {
      // 批量处理
      return data.member.map((item: any) => {
        console.log(item);
        const userName = userList.value.find((itm: any) => itm.id === item)?.name;
        return {
          projectId,
          orderProductId: orderId,
          typeId: data.typeId,
          userId: item,
          userName
        };
      });
    },
    message: "添加成功"
  };
  dialogForm({
    config: config.value,
    successCallback: () => {
      getProjectUserPageFn();
    }
  });
};

const getProjectUserPageFn = async () => {
  const { data } = await getProjectUserList({
    projectId
  });
  tableData.value = data || [];
  emits("count", {
    key: "member",
    count: tableData.value.length || 0
  });
};

// 删除人员
const deleteAccount = async (params: any) => {
  await useHandleData(deleteProjectUser, { id: params.id }, `删除【${params.userName}】`);
  getProjectUserPageFn();
};

// 获取所有用户
const getListAllUserApi = async () => {
  const { data } = await getListAllUser();
  userList.value = data || [];
};

onMounted(() => {
  getProjectUserPageFn();
  getListAllUserApi();
  promise.then((res: any) => {
    typeList.value = res[getDictId("projectMember")].filter((item: any) => item.remark === "custom");
    console.log(typeList.value);
  });
});
</script>
<style lang="scss" scoped>
.wik-document {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-flow: column nowrap;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 2px;
    border: 1px solid #f4f4f4;
    box-sizing: border-box;
    border-bottom: none;
    color: #333;
    padding: 0 10px;
    :deep(.el-button) {
      color: #333;
    }
  }
  &-bottom {
    flex: 1;
    height: calc(100% - 36px);
  }
}
</style>
